<template>
  <div>
    <van-cell is-link @click="showPopup">京东白条</van-cell>
    <van-popup v-model="show">
    <div class="top">
        <img src="../../../assets/img/2-1.png" alt="">
    </div>
    <div class="box1">
        <div class="box1-1"></div>
        <p class="s1">激活白条</p>
        <span class="s2">奖励自动发放</span>
    </div>
    <ul class="uls">
        <li class="one">
        <div class="left">￥60</div>
        <div class="right">
            <p class="txt1">打白条立减60元</p>
            <p class="txt2">新激活用户可得</p>
        </div>
        </li>
        <li class="two">
            <div class="left">￥1</div>
        <div class="right">
            <p class="txt1">满99减1元</p>
            <p class="txt2">新激活用户可得</p>
        </div>
        </li>
        <li class="three">
            <div class="left">￥20</div>
        <div class="right">
            <p class="txt1">满1000减20元限分期</p>
            <p class="txt2">新激活用户可得</p>
        </div>
        </li>
    </ul>
    <div class="box2">
        查看更多
        <van-icon name="arrow-down" />
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</van-popup>
  </div>
</template>

<script>
export default {
    data() {
    return {
      show: false,
    };
  },
  
  methods: {
    showPopup() {
      this.show = true;
    },
  },
  mounted (){
    this.showPopup()
  }
  }
</script>

<style scoped>
    .top {
        width: 350px;
    }
    .top img{
        width: 90%;
    }
    .box1 {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
    }
    .box1-1 {
        width: 4px;
        height: 16px;
        background-color: red;
        margin: 30px 10px 30px 30px;
    }
    .box1-1 .s1 {
        font-size: 17px;
        color: #333333;
    }
    .box1-1 .s2 {
        font-size: 17px;
        color: red;
    }
    .uls img {
        width: 295px;
        height: 64px;  
    }
    .uls .one {
        width: 295px;
        height: 64px;
        margin: auto;
        color: #fff;
        background-image: url(../../../assets/img/2-2.png);
        background-size: 100%;
        display: flex;
    }
    .uls .left {
        font-size: 32px;
        color: #FFFFFF;
        font-weight: bold;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-left: 10px;
    }
    .right {
        margin-left: 30px;
    }
    .right .txt1{
        font-size: 15px;
        font-weight: bold;
        color: #FFFFFF;
    }
    .right .txt2{
        font-size: 12px;
        color: #FFFFFF;
        margin-top: -10px;
    }
    .uls .two {
        width: 295px;
        height: 64px;
        margin: auto;
        color: red;
        background-image: url(../../../assets/img/2-3.png);
        background-size: 100%;
        display: flex;
        margin-top: 10px;
    }
    .uls .three {
        width: 295px;
        height: 64px;
        margin: auto;
        color: red;
        background-image: url(../../../assets/img/2-3.png);
        background-size: 100%;
        display: flex;
        margin-top: 10px;
    }
    .two .right .txt1{
        font-size: 15px;
        font-weight: bold;
        color: red;
    }
    .three .right .txt1{
        font-size: 15px;
        font-weight: bold;
        color: red;
    }
    .two .right .txt2{
        font-size: 12px;
        color: red;
        margin-top: -10px;
    }
    .two .right  {
        margin-left: 45px;
    }
    .three .right .txt2{
        font-size: 12px;
        color: red;
        margin-top: -10px;
    }
    .two .left {
        color: red;
        margin-left: 10px;
    }
    .three .left {
        color: red;
        margin-left: 10px;
    }
    .box2 {
        width: 100%;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        color: #B0B0B0;
    }

    .box3 {
        width: 305px;
        height: 56px;
        background-image: url(../../../assets/img/2-4.png);
        background-size: 100%;
        margin: auto;
    }
    .box4 {
        height: 336px;
        background-image: url(../../../assets/img/2-6.png);
        background-size: 100%;
        margin-top: 30px;
    }
    .box5 {
        width: 100%;
        height: 178px;
        background-image: url(../../../assets/img/2-7.png);
        background-size: 100%;
    }
    .box6 {
        width: 100%;
        height: 314px;
        background-image: url(../../../assets/img/2-8.png);
        background-size: 100%;
    }

 
</style>